<template>
	<view>
		<scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="toView" scroll-with-animation="true" @scroll="scrollLeftAllBrand">
			<view class="content-row bac-white" style="margin-top: 30rpx;">
				<view
					style="width: 138rpx;height: 102rpx; display: flex;align-items: center;justify-content: center;">
					<image class="iamge-class" src="@/static/allCar.png" style="width: 44rpx;height: 44rpx;" mode="widthFix"></image>
				</view>
				<view class="marginLeft5  brand-name-class" @click="item3Click()">{{pageBrandsDatas[0]['name']}}</view>
				<view class="num-text-class for-Sale-class" @click="item3Click()" style="margin-right: 38rpx;">{{pageBrandsDatas[0]['num']}}条 
					<image src="@/static/back_right.png" style="width: 14rpx;height: 16rpx;margin-left: 14rpx;"></image>
				</view>
			</view>
			<view>
				<view v-for="(item1,index1) in pageBrandsDatas" :key="index1" v-if="isShow" :id="item1.key">
					<view class="scrollKeyId">
						<view class="star-text-view">{{item1.key}}</view>
					</view>
					<view v-for="(item2,index2) in item1.value" :key="index2">
						<view class="content-row bac-white" @click="item1Click(item2,index2,item1.key)">
							<view style="width: 138rpx;height: 102rpx; display: flex;align-items: center;justify-content: center;">
								<image class="iamge-class" :src="item2.cover_url" mode="widthFix"></image>
							</view>
							<view class="marginLeft5  brand-name-class">{{item2.name}}</view>
							<view class="num-text-class for-Sale-class" style="margin-right: 38rpx;">{{item2.num}}条 
							<image src="@/static/back_right.png" style="width: 14rpx;height: 16rpx;margin-left: 14rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 右侧字母导航条 -->
		<view class="letter-nav" >
			<view :class="temp==index?'right-view-text-select':'right-view-text'"
				v-for="(item, index) in pageBrandsDatas" :key="index" @click="toSelectIndex(item.key,index)" v-if="item.key!=undefined">
				{{item['key']}}
			</view>
		</view>
		<uni-popup ref="right_popup" :animation="true" type="right" @maskClick="maskClickpopup()"
			@change="changePopup()">
			<scroll-view :scroll-y="true" v-if="isShow2" class="scroll-view-class bac-eee"
				:style="'height:'+scrollH+'px'">
				<view class="content-row bac-white pad18-14"  style="background-color: #f1f1f1;">
					<view @click="backClick()">返回</view>
				</view>
				
				<view class="content-row bac-white" @click="item4Click(pageSeriesDatas)" style="padding-left: 20rpx;padding-right: 20px;">
					<view
						style="width:180rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:102rpx;line-height: 102rpx;">
						{{pageSeriesDatas['name']}}
					</view>
								
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view style="color: #1C212546;font-weight: 400;font-family: Source Han Sans CN;font-size: 24rpx;margin-left: 20rpx;">{{pageSeriesDatas['num']}}条
						<image src="@/static/back_right.png" style="width: 14rpx;height: 16rpx;margin-left: 14rpx;"></image>
						</view>
					</view>
					
				</view>
				
				<view v-for="(item1,index1) in pageSeriesDatas.value" :key="index1" v-if="isShow">
					<view class="content-row pad6-14-4">
						<view class="star-text-view">{{item1.name}}</view>
					</view>
					<view v-for="(item2,index2) in item1.value" :key="index2">
						<view class="content-row bac-white" @click="item2Click(item2,index2,item1.key)" style="padding-left: 20rpx;padding-right: 20px;">
							<view
								style="width:180rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:102rpx;line-height: 102rpx;">
								{{item2.name}}
							</view>
				
							<view style="display: flex;flex-direction: row;align-items: center;">
								<view style="color: #1C212546;font-weight: 400;font-family: Source Han Sans CN;font-size: 24rpx;margin-left: 20rpx;">{{item2.num}}条
								<image src="@/static/back_right.png" style="width: 14rpx;height: 16rpx;margin-left: 14rpx;"></image>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
		
		</uni-popup>
	</view>
</template>

<script>
	import {
		getBrandsList,
		getUsedVehicleSeries,
		getUsedSearchBrandList,
		getUsedSearchSeries,
	} from '@/api/brand.js';
	
	import {
        getOneBrandList,
		getSecondBrandList
	} from '@/api/discount.js';
	
	import {
		usedCarSearchBrand,
		usedCarSearchSeries
	} from '@/api/secondhandCar.js'
	export default {
		data() {
			return {
				temp: 0,
				toView: '',
				scrollH: 300,
				carBrandName: '',
				isShow: true,
				isChecked: false,
				isShow2: true,
				pageBrandsDatas: [{name:"全部品牌"}],
				brandDataLists: [],
				pageSeriesDatas: [],
				brand_id: '',
				brand_type: 'secondhand',
				search_page_type: false,
				secondhand_page_type: false,
				topList:[]

			}
		},
		onLoad(option) {
			this.getOneBrandList(0);
		},
		onReady() {
			setTimeout(() => {
				this.getNodesInfo()
			}, 2000)
		},
		methods: {
			item2Click(item2,index2,item1_key){
			    this.back_page(item2);
			},
			item4Click(item1){
			    var pages = getCurrentPages()
				//上一页面 
				var prevPage = pages[pages.length - 2]
				//item.secondhandCarListId = 1
				let item = {};
				item.id =0;
				item.brand_id =this.brand_id;
				prevPage.$vm.backData(item) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
				// 返回上一页
				uni.navigateBack({
					delta: 1
				})
				console.log("99999");
				console.log(JSON.stringify(item));
				console.log("99999")
			},
			item3Click(){
			    var pages = getCurrentPages()
			    //上一页面 
			    var prevPage = pages[pages.length - 2]
			    //item.secondhandCarListId = 1
				let item = {};
				item.id =0;
			    prevPage.$vm.backData(item) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
			    // 返回上一页
			    uni.navigateBack({
			    	delta: 1
			    })
			},
			item1Click(item, index, key){
			    //this.back_page(item);	
				
				this.$utils.log(JSON.stringify(item))
				this.carBrandName = item.name
				this.brand_id = item.brand_id
				this.getSecondBrandList(item.brand_id);
				
				this.$refs.right_popup.open()
			},
			//获取二手车品牌数据
			getOneBrandList(used_state) {
				var that = this
				getOneBrandList(used_state).then(res => {
					that.$utils.log('打印品牌数据列表  ' + JSON.stringify(res))
					that.pageBrandsDatas = res.data
					that.$forceUpdate()
				})
			},
			getSecondBrandList(brand_id) {
				var that = this
				getSecondBrandList(brand_id).then(res => {
					that.$utils.log('打印品牌数据列表999  ' + JSON.stringify(res))
					that.pageSeriesDatas = res.data
					that.$forceUpdate()
				})
			},

			getNodesInfo() {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.scrollKeyId').boundingClientRect().exec(data => {
					// console.log(data);
					let res = data[0];
					let rel = [];
					res.map(item => {
						rel.push(item.top);
					});
					this.topList = rel;
				});
			},
			scrollLeftAllBrand(e) {
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop >= h1 && scrollTop < h2) {
						this.temp = i;
					}
				}
			},
			toSelectIndex(item, index) {
				this.$utils.log("打印点击选择key   " + JSON.stringify(item))
				this.toView = item
				this.temp = index
			},
			//获取寻车品牌列表
			getPageSearchBrandsList(used_state) {
				var that = this
				getUsedSearchBrandList(used_state).then(res => {
					that.pageBrandsDatas = res.data
					that.$forceUpdate()
				})
			},

			//获取车系
			pageGetUsedVehicleSeries(brand_id,used_state) {
				var that = this
				const locationData = uni.getStorageSync('address')
				getUsedVehicleSeries(brand_id, locationData.id,used_state).then(res => {
					that.$utils.log("获取车系 ershouche " + JSON.stringify(res))
					if (res.code == 0) {
						that.isShow2 = false
						this.$nextTick(() => {
							that.pageSeriesDatas = res.data
							that.$forceUpdate()
							that.isShow2 = true
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			pageGetUsedSearchSeries(brand_id) {
				var that = this
				getUsedSearchSeries(brand_id).then(res => {
					if (res.code == 0) {
						that.isShow2 = false
						this.$nextTick(() => {
							that.pageSeriesDatas = res.data
							that.$forceUpdate()
							that.isShow2 = true
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			//获取寻车品牌 
			getPageusedCarSearchBrand() {
				var that = this
				usedCarSearchBrand().then(res => {
					if (res.code == 0) {
						that.pageBrandsDatas = res.data
						that.$forceUpdate()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			//获取寻车车系
			getPageusedCarSearchSeries(brand_id) {
				var that = this
				usedCarSearchSeries(brand_id).then(res => {
					that.$utils.log("打印返回的车系数据  " + JSON.stringify(res))
					if (res.code == 0) {
						that.isShow2 = false
						that.$nextTick(() => {
							that.pageSeriesDatas = res.data.data
							that.$forceUpdate()
							that.isShow2 = true
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},

			backClick() {
				this.$refs.right_popup.close()
			},
			maskClickpopup() {},
			changePopup() {},

			//点击不限品牌
			allbrandClick() {
				var obj = {}
				obj.id = ''
				this.back_page(obj)
			},
			//点击不限车系
			allSeries() {
				var obj = {}
				obj.brand_id = this.brand_id
				obj.name = this.carBrandName
				this.back_page(obj)
			},
			back_page(item) {
				// 获取当前页上的栈（数组形式）
				var pages = getCurrentPages()
				//上一页面 
				var prevPage = pages[pages.length - 2]
				//item.secondhandCarListId = 1
				prevPage.$vm.backData(item) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
				// 返回上一页
				uni.navigateBack({
					delta: 1
				})
			},
			switch1Change() {
				var that = this
				if (this.search_page_type) {
					this.getPageusedCarSearchBrand()
				} else {
					if (that.isChecked) {
						that.isChecked = false
						that.getPageBrandsList(0)
					} else {
						that.isChecked = true
						that.getPageBrandsList(1)
					}
				}

			},
			/*handleClickBack(){
				uni.navigateTo({
					url:"/pages/discountCar/discountCar",
				})
			},
			handleClickBackParams(val){
				uni.navigateTo({
					url:"/pages/discountCar/discountCar",
				})
			}*/
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.star-text-view {
		font-size: 28rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #1C2125;
		opacity: 1;
	}

	.content-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.scrollKeyId{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 6px 0px 4px 14px;
	}

	.pad18-14 {
		padding: 18rpx 28rpx;
	}

	.pad6-14-4 {
		padding: 6px 0px 4px 14px;
	}

	.iamge-class {
		width: 100rpx;
		height: 52rpx;
	}

	.num-text-class {
		flex: 1;
		text-align: right;
		color: #1C2125;

	}

	.brand-name-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000026;
		opacity: 1;
	}

	.marginLeft5 {
		margin-left: 5px;
	}

	.fonttext {
		font-size: 28rpx;
		font-family: "Source Han Sans CN";


	}

	.for-Sale-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C212546;
	}

	.no-limit-brand-text {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000026;
		opacity: 1;
	}

	.only-for-sale-text {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
	}

	.text28 {
		font-size: 28rpx;
	}

	.bac-eee {
		background-color: #eee;
	}

	.bac-white {
		background-color: white;
	}

	.height30 {
		height: 30rpx;
	}

	.scroll-view-class {
		white-space: nowrap; // 滚动必须加的属性
		height: 100%;
		width: 600rpx;
	}

	.flex1 {
		flex: 1;
	}

	.text-center {
		text-align: center;
	}

	.letter-nav {
		display: flex;
		position: fixed;
		right: 14rpx;
		top: 220rpx;
		height: 100vh;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.right-view-text {
		font-size: 6px;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #999999;
		padding: 4rpx;
	}

	.right-view-text-select {
		font-size: 32rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #0E59EA;
		padding: 4rpx;
	}

	.scroll-container {
		height: 100vh;
		background-color: #F7F8FA;;
	}
	
	.chexititleName-class-danhang{
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>